<!--货运单修改页面-->
<template>
  <div class="note" :style ="note" >
    <el-row>
      <el-col :span="24">
        <el-form :model="form" class="ell">
          <el-row>
            <el-col :span="12">
          <el-form-item label="订单状态" :label-width="formLabelWidth" >
            <el-input v-model="form.auditstatus" autocomplete="off" placeholder="请更改运单状态" readonly></el-input>
          </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="发货人" :label-width="formLabelWidth">
                <el-input v-model="form.pname" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="发货电话" :label-width="formLabelWidth">
                <el-input v-model="form.ptel" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="发货地" style="margin-left: 65px">
                <el-cascader
                    :options="options"
                    ref="cascaderAddr1"
                    v-model="sendOptions"
                    @change="sendChange">
                </el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="收货人" :label-width="formLabelWidth">
                <el-input v-model="form.rname" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="收货电话" :label-width="formLabelWidth">
                <el-input v-model="form.rtel" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="收货地" style="margin-left: 65px">
                <el-cascader
                    :options="options"
                    ref="cascaderAddr2"
                    v-model="receiveOptions"
                    @change="receiveChange">
                </el-cascader>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="发货日期" :label-width="formLabelWidth">
                <el-input v-model="form.sdate" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="待收货款" :label-width="formLabelWidth">
                <el-input v-model="form.payment" autocomplete="off" readonly></el-input>
              </el-form-item >
            </el-col>
          </el-row>
<!--          <el-row>-->
<!--            <el-col :span="8">-->
<!--              <el-form-item label="返款类型">-->
<!--                <el-radio-group v-model="form.refundtype" disabled>-->
<!--                  <el-radio :label="3">无业务</el-radio>-->
<!--                  <el-radio :label="6">即日退</el-radio>-->
<!--                  <el-radio :label="9">三日退</el-radio>-->
<!--                </el-radio-group>-->
<!--              </el-form-item><br>-->
<!--            </el-col>-->
<!--          </el-row>-->

          <el-row>
            <el-col :span="8">
              <el-form-item label="付款方式">
                <el-radio-group v-model="form.pay" disabled>
                  <el-radio :label="3">先付</el-radio>
                  <el-radio :label="6">货到付款</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row><br>

          <!--货物信息-->
          <el-row>
            <el-col :span="12">
              <el-form-item label="重量(kg)" :label-width="formLabelWidth">
                <el-input v-model="form.weight" autocomplete="off"></el-input>
              </el-form-item >
            </el-col>
            <el-col :span="12">
              <el-form-item label="体积(m3)" :label-width="formLabelWidth">
                <el-input v-model="form.volume" autocomplete="off"></el-input>
              </el-form-item >
            </el-col>
          </el-row>


          <el-col :span="6">
            <el-form-item label="是否包含易碎品" >
              <el-radio-group v-model="form.breakable" disabled>
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

        </el-form>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false" size="mini" >
        <router-link to="/record" >取消</router-link>
      </el-button>
      <el-button type="primary" @click="set()" size="mini">
        确 定
      </el-button>
      <el-button type="success" size="mini" plain  @click="re()">
        <router-link to="/record" >返回首页面</router-link>
      </el-button>
    </div>

  </div>
</template>

<script>
let pcas = require('../assets/pca-code.json')

export default {
  data() {
    return {
      note: {
        backgroundImage: "url(" + require("../image/2.jpg") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "1200px auto",
        marginTop: "-20px",
        marginLeft: "-20px",
      },


      options: pcas,
      sendOptions: [],
      receiveOptions: [],
      // refundtype: 3,
      // pay:2,
      // breakable:2,
      //隐藏或者显示对话框
      dialogFormVisible: false,

      form: {
        auditstatus:'',
        id:'',
        pname: '',
        ptel:'',
        paddress:'',
        rname: '',
        rtel:'',
        raddress:'',
        sdate: '',
        payment:'',
        refundtype:'3',
        weight:'',
        volume:'',
        pay:'3',
        breakable:'false'
      },
      formLabelWidth: '120px',

    }
  },
  methods: {
    // 获取省市区地址级联
    sendChange(thsAreaCode) {
      thsAreaCode = this.$refs['cascaderAddr1'].getCheckedNodes()[0].pathLabels// 注意2： 获取label值
      // 注意3： 最终结果是个一维数组对象
      // this.formLabelAlign.sendAddress = thsAreaCode[0] + thsAreaCode[1] + thsAreaCode[2];
      // console.log(this.sendOptions);
    },
    receiveChange(thsAreaCode) {
      thsAreaCode = this.$refs['cascaderAddr2'].getCheckedNodes()[0].pathLabels// 注意2： 获取label值
      // 注意3： 最终结果是个一维数组对象
      // this.formLabelAlign.receiveAddress = thsAreaCode[0] + thsAreaCode[1] + thsAreaCode[2];
    },


    //  修改
    set(){
      let id =this.$route.query.id;
      console.log(id)
      this.form.id=id;

      this.form.paddress = this.sendOptions[0]+","+this.sendOptions[1]+","+this.sendOptions[2];
      this.form.raddress = this.receiveOptions[0]+","+this.receiveOptions[1]+","+this.receiveOptions[2];

      // 发送ajax
      this.axios.put("http://localhost:8080/modify/updateByEntity",this.form).then(res =>{
        console.log(res.data)
        console.log(this.form)
        alert("温馨提示:添加成功后自动刷新,如果没发生刷新,则存在异常,请稍后再试")
        location.reload();
        this.$router.push({  //核心语句
          path:'/record',   //跳转的路径

        })
      })
    },
    see(){
      let id =this.$route.query.id;
      console.log(id)
      // alert("四不四撒")
      // 发送ajax
      this.axios.get("http://localhost:8080/modify/user/"+id).then(res =>{
        console.log(res.data)
        this.form= res.data;
        this.sendOptions = res.data.paddress.split(",");
        this.receiveOptions = res.data.raddress.split(",")
      })

    },
  },
  // 初始化列表数据
  created(){
    this.see();
  },

}
</script>

<style lang="scss" >

.ell .el-form-item__label {
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #000000;
  line-height: 40px;
  padding: 0 12px 0 0;
  box-sizing: border-box;
}
.ell .el-input__inner {
  -webkit-appearance: none;
  background-color: #e5d2d2;
  background-image: none;
  border-radius: 1000px;
  border: 1px solid #000000;
  box-sizing: border-box;
  color: #0b0b0b;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
}
.ell .el-radio__input.is-disabled+span.el-radio__label {
  color: #000000;
  cursor: not-allowed;
}


</style>